<!DOCTYPE html>
<html>
<head>
<title>Fig. 4.28</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="450" style="background-color: #fff;"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.lineWidth = 2;
ctx.font = 'italic 18px Times New Roman';
ctx.fillStyle = 'black';
ctx.strokeStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Coordinates and Dimensions ---
const origin = { x: 200, y: 220 };
const z_len_pos = 120;
const z_len_neg = 120;
const y_len = 150;
const x_len = 120;
const a_dist = 80;

// --- Helper function to draw an arrow head ---
function drawArrowHead(x, y, angle) {
    const headlen = 10;
    ctx.save();
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.moveTo(0, 0);
    ctx.lineTo(-headlen, headlen / 2.5);
    ctx.lineTo(-headlen, -headlen / 2.5);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// --- Draw Axes ---
// z-axis (the wire)
ctx.beginPath();
ctx.moveTo(origin.x, origin.y - z_len_pos);
ctx.lineTo(origin.x, origin.y + z_len_neg);
ctx.stroke();
drawArrowHead(origin.x, origin.y - z_len_pos, -Math.PI / 2); // Pointing up
ctx.fillText('z', origin.x + 15, origin.y - z_len_pos - 10);

// y-axis
ctx.beginPath();
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(origin.x + y_len, origin.y);
ctx.stroke();
drawArrowHead(origin.x + y_len, origin.y, 0); // Pointing right
ctx.fillText('y', origin.x + y_len + 15, origin.y);

// x-axis
const xAngle = 135 * Math.PI / 180; // Angle in canvas coordinates (points bottom-left)
const xEndX = origin.x + x_len * Math.cos(xAngle);
const xEndY = origin.y + x_len * Math.sin(xAngle);
ctx.beginPath();
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(xEndX, xEndY);
ctx.stroke();
drawArrowHead(xEndX, xEndY, xAngle);
ctx.fillText('x', xEndX - 15, xEndY + 15);

// Origin tick on z-axis
const tick_len = 15;
ctx.beginPath();
ctx.moveTo(origin.x - tick_len / 2, origin.y);
ctx.lineTo(origin.x + tick_len / 2, origin.y);
ctx.stroke();

// --- Draw Charges ---
const chargeRadius = 4;
const q_plus_pos = { x: origin.x, y: origin.y - a_dist };
const q_minus_pos = { x: origin.x, y: origin.y + a_dist };

// +Q charge
ctx.beginPath();
ctx.arc(q_plus_pos.x, q_plus_pos.y, chargeRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.fillText('Q', q_plus_pos.x + 20, q_plus_pos.y);

// -Q charge
ctx.beginPath();
ctx.arc(q_minus_pos.x, q_minus_pos.y, chargeRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.fillText('-Q', q_minus_pos.x + 25, q_minus_pos.y);

// --- Draw Distance Markers 'a' ---
const marker_x = origin.x - 40;
const marker_tick_len = 10;

// Top 'a'
ctx.beginPath();
ctx.moveTo(marker_x, q_plus_pos.y);
ctx.lineTo(marker_x, origin.y);
ctx.stroke();
// Ticks
ctx.beginPath();
ctx.moveTo(marker_x - marker_tick_len / 2, q_plus_pos.y);
ctx.lineTo(marker_x + marker_tick_len / 2, q_plus_pos.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(marker_x - marker_tick_len / 2, origin.y);
ctx.lineTo(marker_x + marker_tick_len / 2, origin.y);
ctx.stroke();
// Label
ctx.fillText('a', marker_x - 15, origin.y - a_dist / 2);

// Bottom 'a'
ctx.beginPath();
ctx.moveTo(marker_x, origin.y);
ctx.lineTo(marker_x, q_minus_pos.y);
ctx.stroke();
// Ticks
// Top tick is shared with the marker above, redraw for clarity
ctx.beginPath();
ctx.moveTo(marker_x - marker_tick_len / 2, origin.y);
ctx.lineTo(marker_x + marker_tick_len / 2, origin.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(marker_x - marker_tick_len / 2, q_minus_pos.y);
ctx.lineTo(marker_x + marker_tick_len / 2, q_minus_pos.y);
ctx.stroke();
// Label
ctx.fillText('a', marker_x - 15, origin.y + a_dist / 2);

// --- Draw Figure Caption ---
ctx.font = 'bold 18px Times New Roman';
ctx.fillText('Fig. 4.28', origin.x, canvas.height - 30);

</script>

</body>
</html>